<template>
  <VDialog
    @close="handleClose"
    @save="save"
    title="分配角色"
    :loading="loading"
    width="720px"
  >
    <template #content>
      <div class="my-[10px] mx-[20px]">
        <div class="mb-[15px]">
          {{ data.roleType }}:{{ data.roletitle || "--" }}
        </div>
        <div
          class="border border-solid border-[var(--base-border-color)] p-[10px]"
        >
          <p class="mb-[5px]">拥有该分类的角色：</p>
          <el-input
            class="search mb-[5px]"
            v-model="roleName"
            size="large"
            placeholder="角色名称"
            prefix-icon="Search"
            clearable
          />
          <template v-for="item in roleListData" :key="item.id">
            <el-tag
              :type="roleSelect?.includes(item.id) ? '' : 'info'"
              class="mb-[10px] mx-[0.25rem] text-[var(--base-text-color)] text-[14px] cursor-pointer"
              :effect="roleSelect?.includes(item.id) ? 'light' : 'plain'"
              size="large"
              round
              @click="handleRole(item.id)"
            >
              {{ item.name }}
            </el-tag>
          </template>
        </div>
      </div>
    </template>
  </VDialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { roleList } from "@/api/system/role";
import { debounce } from "@/utils/tools.js";
const props = defineProps({
  data: { type: Object, default: () => {} },
  api: { type: Object, required: true },
});
const { data } = toRefs(props);
const roleName = ref("");
const emit = defineEmits(["update:modelValue", "close", "refresh"]);
const loading = ref(false);
const roleListData = ref([]);
const roleListDataAll = ref([]);
const getRoleList = async () => {
  const { data } = await roleList({ pageNum: 1, pageSize: 1000 });
  roleListData.value = data || [];
  roleListDataAll.value = data || [];
};
getRoleList();

const updateRoleList = debounce((val) => {
  const keyword = val.trim().toLowerCase();
  roleListData.value = keyword
    ? roleListDataAll.value.filter((e) =>
        e.name.toLowerCase().includes(keyword)
      )
    : roleListDataAll.value;
}, 300);
watch(
  () => roleName.value,
  (val) => {
    updateRoleList(val);
    // if (!val) {
    //   return (roleListData.value = roleListDataAll.value);
    // } else {
    //   roleListData.value = roleListDataAll.value.filter((e) =>
    //     e.name.includes(val)
    //   );
    // }
  }
);
const roleSelect = ref([]);
watch(
  () => data.value?.roleData,
  (val) => {
    roleSelect.value = val || [];
  }
);
const handleRole = (id) => {
  if (roleSelect.value?.includes(id)) {
    const index = roleSelect.value?.findIndex((e) => {
      return e === id;
    });
    roleSelect.value?.splice(index, 1);
  } else {
    roleSelect.value.push(id);
  }
};
const handleClose = async (refresh) => {
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
const save = async () => {
  try {
    loading.value = true;
    const { parmas } = data.value;
    const { code, message } = await props.api({
      ...parmas,
      role_ids: roleSelect.value,
    });
    if (code !== 200) return ElMessage.error(message);
    ElMessage.success("更新成功!");
    handleClose(true);
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
</script>
<style lang="scss" scoped>
.search {
  box-sizing: content-box;
  border: none;

  &:deep(.el-input__wrapper) {
    padding: 1px 15px;
    box-shadow: none;
    background-color: var(--base-small-bg-color);
  }
}
:deep(.el-tag--light) {
  border-color: #3487ff;
  background-color: var(--base-primary-bg);
  .el-tag__content {
    color: #3487ff;
  }
}
</style>
